import { ObjectDirective } from 'vue';
import Viewer from 'viewerjs';
import { debounce } from 'throttle-debounce';

const install = (app: any, { name = 'viewer', debug = false }) => {
  const viewerDirective: ObjectDirective<any, Function> = {
    created(el, binding, vnode) {
      const debouncedCreateViewer = debounce(50, createViewer)
      debouncedCreateViewer(el, binding.value)

      // 创建watch监听options表达式变化
      createWatcher(el, binding, vnode, debouncedCreateViewer)

      // 是否监听dom变化
      if (!binding.modifiers.static) {
        // 增加dom变化监听
        createObserver(el, binding.value, debouncedCreateViewer, binding.modifiers.rebuild)
      }
    },
    unmounted(el) {
      // 销毁dom变化监听
      destroyObserver(el)
      // 销毁指令表达式监听
      destroyWatcher(el)
      // 销毁viewer
      destroyViewer(el)
    }
  }
  app.directive(name, viewerDirective)
};

function createViewer(el: any, options: any, rebuild = false) {

}

function createObserver(el: any, options: any, debouncedCreateViewer: any, rebuild: any) {
}
function createWatcher(el: any, { expression }: any, vnode: any, debouncedCreateViewer: any) { }
function destroyViewer(el: any) { }
function destroyObserver(el: any) { }
function destroyWatchers(el: any) { }


export default {
  install
}
